<div id="deptTable">
    <div class="layui-card layadmin-header">
        <div class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
            <a lay-href="">主页</a><span lay-separator="">/</span>
            <a><cite>部门管理</cite></a>
        </div>
    </div>
    <div class="demoTable">
        <button id="add" class="layui-btn">添加部门</button>
        <button id="dd" class="layui-btn">查看别的页面</button>
    </div>

    <table class="layui-hide" id="dept"></table>
</div>

<div id="deptForm" style="display: none;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend id="formTitle">录入部门信息</legend>
    </fieldset>

    <form id="faqform" class="layui-form" method="post" action="">
        <input type="hidden" id="opr" name="opr" value="addDept"/>
        <input type="hidden" id="id" name="id" value=""/>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input  name="name"  lay-verify="required" autocomplete="off" placeholder="请输入部门名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门介绍</label>
            <div class="layui-input-block">
                <textarea name="detail"  lay-verify="" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="commit" type="button" class="layui-btn" lay-submit="" lay-filter="add">立即提交</button>
                <button type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
                <button id="back" type="button" class="layui-btn layui-btn-primary">返回</button>
            </div>
        </div>
    </form>
</div>
<script>
    var d;//全局选择器
    var tableIns;
    layui.use(["table", "jquery", "form", "laydate", "upload"], function () {//加载控件
        var table = layui.table,
            $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload;

         tableIns = table.render({
            elem: '#dept'
            , url: 'deptServlet'
            , page: true
            , cellMinWidth: 80
            , limit: 8
            , limits: [8, 16, 24]
            , where: {"opr": "query"}
            , cols: [[
                {type: 'numbers'}
                , {field: 'name', title: '部门名称'}
                , {field: 'updateTime', title: '最后更新时间'}
                , {field: 'right', title: '操作', align: 'center', toolbar: '#barDemo'}
            ]]
        });

        //监听工具条
        table.on('tool', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {//点击查看按钮显示数据
                layer.open({
                    title: data.title
                    , type: 1
                    , area: '500px'
                    , content: '<fieldset class="layui-elem-field layui-field-title">\n' +
                    '  <legend>作者 - ' + data.author + '</legend>\n' +
                    '  <div class="layui-field-box">\n' +
                    ' ' + data.content + '\n' +
                    '  </div>\n' +
                    '</fieldset>'
                });
            } else if (obj.event === 'del') {//点击删除
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({//调用去后台进行ajax删除
                        url: "userServlet",
                        data: {"opr": "del", "id": data.id},
                        type: "post",
                        dataType: "json",
                        success: function (j) {
                            if (j.state == true) {
                                layer.msg(j.meg);
                                obj.del();
                                layer.close(index);
                            }
                        }
                    });

                });
            } else if (obj.event === 'edit') {//进行修改的时候，我将数据直接赋值到表单里去，修改了opr的值

                d=data.id;
                $("#formTitle").html("修改用户信息");
                $("#deptForm input[name=id]").val(data.id);
                $("#deptForm input[name=opr]").val("update");
                $("#deptForm input[name=name]").val(data.name);
                $("#deptForm input[name=realName]").val(data.realName);
                $("#deptForm input[name=birthday]").val(data.birthday);
                $("#deptForm input[name=password]").val(data.password);
                form.render();//对于表单元素进行渲染

                $("#deptTable").toggle();
                $("#deptForm").toggle();
            }
        });

        $("#dd").click(function(){
            layer.open({
                type:2,
                area: ['700px', '450px'],
                fixed: false, //不固定
                maxmin: true,
                content:'doc-example_tutorial-dynamic-data.html'
            });
        });
        $("#add").click(function () {
            $("#reset").click();
            $("#deptForm input[name=opr]").val("addDept");
            $("#formTitle").html("录入部门信息");
            $("#deptTable").toggle();
            $("#deptForm").toggle();
        });

        $("#back").click(function () {
            $("#deptTable").toggle();
            $("#deptForm").toggle();
        });

        form.on("submit(add)", function (data) {//先进行表单验证，如果验证不通过不能进入此处代码
            $.post("deptServlet", $("#faqform").serialize(), function (d) {
                if (d.state) {
                    layer.msg(d.meg);
                    tableIns.reload({
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });//重新载入表格
                } else {
                    layer.msg(d.meg);
                }
                $("#deptTable").toggle();
                $("#deptForm").toggle();
            }, "json");
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        /* end */
    });

</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
